<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>cssDemo</title>
	<link rel="stylesheet" type="text/css" href="one.css">
	<style>
		*{/*选择所有*/
			margin: 0px;
			padding: 0px;
		}
		ul{
			list-style:none;
		}
		.ord{/*class选择器*/
        color: #ff0;
		}
		li{
			color: red;
		}
		#container{/*ID选择器-优先级最高，但是要保证唯一*/
		width: 150px;
		height: 40px;
		font-size: 12px !important;
		position: relative;
        transition: all 1s;
        animation: myframs infinite 10s;
		}
		#container:hover{
			transform: translate(200px,0) ;
			color: red;
  
		}
		.bigFont{
			font-size: 20px;
		}
		@keyframes myframs{
			25%{
				color: #f00;
				transform: translate(700px,0)

			}
			50%{
				color: #00f;
				transform: translate(700px,400px) ;		

			}
			70%{
				color: #0f0;
				transform: translate(-700px,0) ;		

			}
		}

		a[href$=".docx"]{
			background-image: url(pkg_wkcommon_base_z_6fd720e.png);
			background-position: -193px -991px;
			background-repeat: no-repeat;
			padding-left: 20px;
		}
		a:hover{
			text-decoration: none;
			color: red;
		}
		a:before{
			content: '';
		}
	</style>

</head>
<body>
<div id="container">
	<p>
		桃花坞里桃花庵，
		桃花庵前种桃树。
	</p>

	</div>
		<p id="container" class="bigFont" style="font-size:20px !important ;">
            the day is good day,
			the sky is very blue.
		</p>
	
	<ul>
	<li>列表项</li>
	<li class="ord haha">列表项</li>
	<li>列表项</li>
	<li class="ord">列表项</li>
	<li><a href="#">列表项</a></li>
	</ul>
	<span>我爱我的祖国</span>
	<li>这是ul之外的li</li>
	<span>我爱我的祖国</span>
	<a href="aaa.docx">英语单词500个</a>
</body>
</html>